<!-- subpkg_medicine/order_list/index.vue -->
<script lang="ts" setup>
import { orderListApi } from "@/apis/order"
import { ref } from "vue"
// 页面参数
const pageParams = defineProps<{ status: number }>()

// 标签页数据
const feedTabs = ref([
  { label: "待支付", status: 10, rendered: true },
  { label: "待发货", status: 11, rendered: false },
  { label: "待收货", status: 12, rendered: false },
  { label: "已完成", status: 13, rendered: false },
  { label: "已取消", status: 14, rendered: false },
])
// 订单列表
const orderList = ref([])
// 标签页切换
const onTabClick = (index: number, status: number) => {
  // 获取订单列表
  getOrderList(status)
}

const getOrderList = async (status: number) => {
  // 订单列表接口
  const res = await orderListApi(status)
  // 渲染订单列表
  orderList.value = res
  console.log(res)
}
</script>

<template>
  <view class="medicine-page">
    <view class="order-status-tabs">
      <custom-tabs @click="onTabClick" :list="feedTabs"></custom-tabs>
    </view>
    <scroll-view
      refresher-enabled
      refresher-background="#f6f6f6"
      class="uni-scroll-view"
      scroll-y
    >
      <view class="order-list">
        <view class="order-list-item">
          <view class="order-header">
            <text class="number">订单编号: 202201127465</text>
            <text class="status">待支付</text>
          </view>
          <navigator
            url="/subpkg_medicine/order_detail/index"
            hover-class="none"
            class="order-body"
          >
            <view class="medicine">
              <image
                class="medicine-cover"
                src="/static/uploads/medicine-1.jpg"
                mode="aspectFill"
              />
              <view class="medicine-info">
                <text class="name">瑞巴派特片</text>
                <text class="unit symbol">24片</text>
                <text class="price">¥25.00</text>
              </view>
              <view class="quantity">x1</view>
            </view>
            <view class="medicine">
              <image
                class="medicine-cover"
                src="/static/uploads/medicine-2.jpg"
                mode="aspectFill"
              />
              <view class="medicine-info">
                <text class="name">瑞巴派特片</text>
                <text class="unit symbol">24片</text>
                <text class="price">¥25.00</text>
              </view>
              <view class="quantity">x1</view>
            </view>
          </navigator>
          <view class="order-footer">
            <view class="total">共2件商品 合计：¥49.00 （运费¥0.00）</view>
            <view class="buttons">
              <button class="uni-button minor">取消订单</button>
              <button class="uni-button">继续支付</button>
            </view>
          </view>
        </view>
        <!-- 加载状态 -->
        <uni-load-more
          status="loading"
          color="#C3C3C5"
          :icon-size="16"
          :content-text="{
            contentdown: '上拉显示更多',
            contentrefresh: '数据正在加载中',
            contentnomore: '没有更多数据了',
          }"
        />
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
